import React, { useState, useRef } from 'react';

interface LongPageItemProps {
    title: string;
    name: string;
    number: number;
    imageUrl: string;
    type: string;
}

const LongPageItem: React.FC<LongPageItemProps> = ({ title, name, number, imageUrl, type }) => {
    const [isHovered, setIsHovered] = useState(false); // 状态管理当前是否悬停
    const imageRef = useRef<HTMLImageElement | null>(null);

    const handleMouseEnter = () => {
        if (imageRef.current) {
            const imageHeight = imageRef.current.clientHeight;
            const containerHeight = 300; // 使用固定高度
            const imageBottom = parseInt(getComputedStyle(imageRef.current).top, 10) + imageHeight;

            // 如果图片底部超出容器底部，调整位置
            if (imageBottom > containerHeight) {
                imageRef.current.style.transform = `translate(-50%, -${imageHeight - containerHeight}px)`;
            } else {
                imageRef.current.style.transform = `translate(-50%, -100%)`;
            }
        }
        setIsHovered(true); // 悬停状态设为 true
    };

    const handleMouseLeave = () => {
        if (imageRef.current) {
            // 直接回到顶部，不过渡
            imageRef.current.style.transition = 'none';
            imageRef.current.style.transform = `translate(-50%, 0)`;
        }
        setIsHovered(false); // 悬停状态设为 false
    };

    const handleTransition = () => {
        if (imageRef.current) {
            // 恢复过渡效果
            imageRef.current.style.transition = 'transform 5s ease';
        }
    };

    return (
        <div
            style={{
                width: '210px',
                height: '370px',
                position: 'relative',
                marginTop: '4px',
                marginBottom: '10px',
                borderRadius: '6px',
                transition: 'transform 0.3s, box-shadow 0.3s',
                transform: isHovered ? 'translateY(-4px)' : 'translateY(0)', // 悬停时上移 4px
                boxShadow: isHovered ? '0 4px 15px rgba(0, 0, 0, 0.5)' : 'none', // 悬停时添加阴影
            }}
            onMouseEnter={handleMouseEnter} // 鼠标进入
            onMouseLeave={handleMouseLeave} // 鼠标离开
            onMouseOver={handleTransition}    // 恢复过渡效果
        >
            <div style={{ width: '100%', height: '300px', overflow: 'hidden', position: 'relative', borderRadius: '6px' }}>
                <img
                    ref={imageRef}
                    src={imageUrl}
                    alt={title}
                    style={{
                        width: '100%',
                        height: 'auto', // 设置高度自适应
                        borderRadius: '6px',
                        position: 'absolute', // 绝对定位
                        top: 0, // 从顶部开始
                        left: '50%', // 居中水平位置
                        transform: 'translateX(-50%)', // 初始居中
                        transition: 'transform 5s ease', // 设置动画过渡效果
                    }}
                />
            </div>
            <div style={{
                position: 'absolute',
                bottom: '80px',
                left: '10px',
                color: 'white',
                backgroundColor: 'rgba(0, 0, 0, 0.5)', // 设置黑色透明背景
                padding: '2px 4px', // 可选：增加内边距
                borderRadius: '4px' // 可选：设置圆角
            }}>
                <h4>{type}</h4>
            </div>
            <div style={{ padding: '4px' }}>
                <p>{title}</p>
                {isHovered && <p>{name} <span style={{ float: 'right' }}>浏览: {number}</span></p>}
            </div>
        </div>
    );
};

export default LongPageItem;